import React, { memo, useRef, useState } from "react";
import { SearchStyle } from "./style";
import { SearchKeywords } from "@/services/search";
import { NavLink } from "react-router-dom";

export default memo(function Search() {
  const inputRef = useRef();
  const searchRef = useRef();
  const [inputValue, setInputValue] = useState("");
  // 获取焦点
  const phdp = () => {
    inputRef.current.placeholder = "";
    const text = inputRef.current.value;
    // (text)
    if (searchRef.current != undefined) {
      searchRef.current.style.display = "block";
    }
    SearchKeywords(text).then((res) => {
      setInputValue(res);
    });
  };
  // 失去焦点
  const phxs = () => {
    inputRef.current.placeholder = "音乐/视频/电台/用户";
  };
  // 值的变化
  const valueChange = () => {
    const text = inputRef.current.value;
    if (searchRef.current != undefined) {
      searchRef.current.style.display = "block";
    }
    SearchKeywords(text).then((res) => {
      setInputValue(res);
    });
  };

  const closeBox = () => {
    searchRef.current.style.display = "none";
  };
  return (
    <SearchStyle>
      <input
        ref={inputRef}
        className="search-filed"
        onChange={valueChange}
        onFocus={phdp}
        onBlur={phxs}
        type="text"
        placeholder="音乐/视频/电台/用户"
      />
      {inputValue !== "" ? (
        inputValue.result != undefined ? (
          inputValue.result.order != undefined ? (
            <div ref={searchRef} className="searchBox">
              <div className="search-user">搜"啊"相关用户&gt;</div>
              {inputValue.result.order.map((item, index) => {
                return (
                  <div key={item} className="searchCheck clear">
                    <div className="order-left fl">
                      {item === "songs" ? (
                        <span>
                          <i className="songs icon"></i>单曲
                        </span>
                      ) : item === "artists" ? (
                        <span>
                          <i className="artists icon"></i>歌手
                        </span>
                      ) : item === "albums" ? (
                        <span>
                          <i className="albums icon"></i>专辑
                        </span>
                      ) : item === "playlists" ? (
                        <span>
                          <i className="playlists icon"></i>歌单
                        </span>
                      ) : (
                        ""
                      )}
                    </div>
                    <div className="order-right fl">
                      {item === "songs" ? (
                        <div>
                          {inputValue.result.songs.map((itema, indexa) => {
                            return (
                              <NavLink
                                to={{
                                  pathname: "/song",
                                  search: "?id=" + itema.id,
                                }}
                                onClick={closeBox}
                                key={itema.id}
                              >
                                <div className="name">
                                  {itema.name}-
                                  {itema.artists.map((iteme, indexe) => {
                                    return iteme.name + " ";
                                  })}
                                </div>
                              </NavLink>
                            );
                          })}
                        </div>
                      ) : item === "artists" ? (
                        <div>
                          {inputValue.result.artists.map((itemb, indexb) => {
                            return (
                              <NavLink
                                to={{
                                  pathname: "/artist",
                                  search: "?id=" + itemb.id,
                                }}
                                onClick={closeBox}
                                key={itemb.id}
                              >
                                <div className="name">{itemb.name}</div>
                              </NavLink>
                            );
                          })}
                        </div>
                      ) : item === "albums" ? (
                        <div>
                          {inputValue.result.albums.map((itemc, indexc) => {
                            return (
                              <NavLink
                                to={{
                                  pathname: "/album",
                                  search: "?id=" + itemc.id,
                                }}
                                onClick={closeBox}
                                key={itemc.id}
                              >
                                <div className="name">
                                  {itemc.name}-{itemc.artist.name}
                                </div>
                              </NavLink>
                            );
                          })}
                        </div>
                      ) : item === "playlists" ? (
                        <div>
                          {inputValue.result.playlists.map((itemd, indexd) => {
                            return (
                              <NavLink
                                to={{
                                  pathname: "/discover/playlist/" + itemd.id,
                                }}
                                onClick={closeBox}
                                key={itemd.id}
                              >
                                <div className="name">{itemd.name}</div>
                              </NavLink>
                            );
                          })}
                        </div>
                      ) : (
                        ""
                      )}
                    </div>
                  </div>
                );
              })}
              {/* <div className="songs"></div>
                <div className="artists"></div>
                <div className="albums"></div>
                <div className="playlists"></div> */}
            </div>
          ) : (
            <></>
          )
        ) : (
          <></>
        )
      ) : (
        <></>
      )}
    </SearchStyle>
  );
});
